<template>
  <div>
    <dd-form v-bind="searchFormConfig" v-model="formData">
      <template #header>
        <h2 class="pt-4">检索</h2>
      </template>
      <template #footer>
        <div class="text-right pr-6 pb-4">
          <el-button icon="el-icon-refresh" @click="handleRefresh"
            >重置
          </el-button>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleQueryClick"
            >搜索
          </el-button>
        </div>
      </template>
    </dd-form>
  </div>
</template>

<script setup lang="ts">
import DdForm from '@/base-ui/form'
import { ref, defineProps, defineEmits } from 'vue'

const props = defineProps({
  searchFormConfig: {
    type: Object,
    required: true
  }
})
const emit = defineEmits(['resetBtnClick', 'queryBtnClick'])

//优化1:formdata中的属性不应该写死，应由配置文件中searchFormConfig中formItems中的field来决定
const formItems = props.searchFormConfig?.formItems ?? []
const formOriginData: any = {}
for (const formItem of formItems) {
  formOriginData[formItem.field] = ''
}
const formData = ref(formOriginData)

//优化2:当用户点击重置时

const handleRefresh = () => {
  for (const key in formOriginData) {
    formData.value[key] = formOriginData[key]
  }
  //重新请求数据
  emit('resetBtnClick')
}

//当用户点击搜索时
const handleQueryClick = () => {
  //根据搜索条件formData中的数据重新请求数据
  emit('queryBtnClick', formData.value)
}
</script>

<style scoped></style>
